<template>
	<view class="container">
		<uni-indexed-list :options="list" :show-select="true" @uniClick="bindClick" />

		<view class="drawer-box-left">
			<uni-drawer :visible="showLeft" mode="left" @close="closeDrawer">
				<scroll-view :style="{top:scrollTop,height:scrollHeight}" scroll-y="true" class="scroll-Y">
					<view v-for="item in subCarMakeList">
						<view class="sub-title">{{item.text}}</view>
						<view class="sub-list">
							<view class="sub-item" v-for="subItem in item.child" :data-subtext="subItem.text" :data-subid="subItem.value"
							 :data-index="index" @click="getSubCarMackTap">
								<view class="sub-avatar">
									<!-- <image class="img" src="{{baseImgUrl+subItem.url?baseImgUrl+subItem.url:'../../images/car-make-default.png'}}"></image>  -->
									<image class="img" src="../../static/car-make-default.png"></image>
								</view>
								<view class="content">
									<view>{{subItem.text}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</uni-drawer>


		</view>

	</view>
</template>

<script>
	import carMake from '@/utils/carMake.js';
	import util from '@/utils/util.js';
	import uniIndexedList from '@/components/uni-indexed-list/uni-indexed-list.vue';
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	export default {
		components: {
			uniIndexedList,
			uniDrawer
		},
		data() {
			return {
				list: [], //主品牌
				showLeft: false,
				subCarMakeList: [], //子品牌
				scrollTop: '0px',
				scrollHeight: '500px',
			}
		},
		onLoad(options) {
			this.getMakeData();
			this.scrollTop = uni.getSystemInfoSync().windowTop + 'px';
			this.scrollHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().windowTop + 'px';
			if (options.sourcePage) {
				this.sourcePage = options.sourcePage;
			}
		},
		methods: {
			bindClick(data) {
				let self = this;
				this.showLeft = true;
				let carMakeList = carMake;
				let result = [];
				for (let i = 0; i < carMakeList.length; i++) {
					if (carMakeList[i].value == data.select[0].name.value) {
						if (carMakeList[i].child.length == 0) {
							let info = {
								mainId: carMakeList[i].value,
								mainText: carMakeList[i].text,
								subId: '',
								subText: ''
							};
							self.$store.dispatch('carMake/carMakeInfoSet', info).then(function() {
								console.log('主品牌设置成功');
								uni.navigateBack();
							})
							return false;
						} else {
							result = carMakeList[i].child;
						}
					}
				}
				self.subCarMakeList = result;
			},
			hide() {
				this.showLeft = false;
			},
			closeDrawer() {
				this.showLeft = false;
			},
			//获取车型列表
			getMakeData() {
				let self = this;
				let carMakeList = carMake;
				let result = []; //最终结果
				let character = []; //首字母
				let tempArr = [];
				var temp = {}; //临时存储
				for (let i = 0; i < carMakeList.length; i++) {
					var cari = carMakeList[i];
					if (!temp[cari.capital]) {
						result.push({
							letter: cari.capital,
							data: [cari]
						});
						character.push(cari.capital);
						temp[cari.capital] = cari;
					} else {
						for (let j = 0; j < result.length; j++) {
							var dj = result[j];
							if (dj.letter == cari.capital) {
								dj.data.push(cari);
								break;
							}
						}
					}
				};
				character = character.sort();
				self.list = result.sort(util.objCompare("letter", true));
			},
			getSubCarMackTap(e) {
				let self = this;
				let carMakeList = carMake;
				let subText = e.currentTarget.dataset.subtext;
				let subId = e.currentTarget.dataset.subid;
				for (let i = 0; i < carMakeList.length; i++) {
					for (let k = 0; k < carMakeList[i].child.length; k++) {
						for (let j = 0; j < carMakeList[i].child[k].child.length; j++) {
							if (carMakeList[i].child[k].child[j].value == subId) {
								let info = {
									mainId: carMakeList[i].value,
									mainText: carMakeList[i].text,
									subId: subId,
									subText: subText
								};
								self.$store.dispatch('carMake/carMakeInfoSet', info).then(function() {
									self.showLeft = false;
									uni.navigateBack();
									console.log('子品牌设置成功');
								})
							}
						}
					}
				}
			}
		},
		onBackPress() {
			if (this.showLeft) {
				this.hide()
				return true
			}
		}
	}
</script>

<style>
	.sub-title {
		box-sizing: border-box;
		width: 100%;
		padding: 0 30upx;
		height: 70upx;
		line-height: 70upx;
		background-color: #ededec;
		font-size: 28upx;
		color: #180302;
	}

	.sub-item {
		box-sizing: border-box;
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
		border-bottom: 1px solid #f1f1f1;
	}

	.sub-item .sub-avatar {
		flex: 2;
	}

	.sub-item .sub-avatar .img {
		display: block;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin: 0 auto;
	}

	.sub-item .content {
		flex: 8;
		font-size: 28upx;
		color: #180302;
		padding-left: 20upx;
	}

	.scroll-Y {
		box-sizing: border-box;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 5;
		padding-bottom: 20upx;
	}
</style>
